<template>
	<view>
		<view class="px-1">
			<!-- 输入框头部图标 -->
			<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @blur="onSearchBlur"
				@iconClick="onSearchClick" @keyup.enter="onSearchClick"></uni-easyinput>
		</view>
		<one-adv title="热门搜索" cover="../../static/images/demo/demo4.jpg">
			<color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true"
				@click.native="setInput(item)"></color-tag>
		</one-adv>
		<one-adv title="常用分类">
			<color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false"
				@click.native="setInput(item)"></color-tag>
		</one-adv>
		<one-adv title="历史记录" cover="../../static/images/demo/del.png" :del="true" @emitDelStorage="getDelStorage">
			<color-tag v-for="(item,index) in history" :key="index" :item="{name:item}" :color="false"
				@longpress="longpress(index)" class="btn-reaction" @click.native="setInput(item)">
				<icon type="clear" size="16" class="icon-position" v-show="isShow&&currentIndex==index"
					@click="iconRemove(index)" />
			</color-tag>
		</one-adv>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				isShow: false,
				value: '',
				hot: [{
						name: '领券中心'
					},
					{
						name: 'Redmi K20'
					},
					{
						name: 'RedmiBook 14'
					},
					{
						name: '智能积木 越野四驱车'
					},
					{
						name: '手环 腕带'
					},
				],
				cate: [{

						name: '耳机'
					},
					{
						name: '手机'
					},
					{
						name: '音箱'
					},
					{
						name: '手表'
					},
					{
						name: '配件'
					},
					{
						name: '网关/传感器'
					},
					{
						name: '健康'
					},
					{
						name: '酷玩'
					},
				],
				history: [],
			}
		},
		mounted() {
			let historyList = uni.getStorageSync('history_key')
			if (historyList) {
				this.history = historyList
			}
		},
		methods: {
			onSearchBlur() {
				this.value = this.value.trim()
			},
			onSearchClick() {
				if (this.value == '') {
					uni.showToast({
						title: "搜索内容不能为空",
						icon: 'none'
					})
					return;
				} else {
					let index = this.history.indexOf(this.value)
					if (index == -1) {
						this.history.unshift(this.value)
						uni.setStorageSync('history_key', this.history);
					} else {
						this.history.splice(index, 1)
						this.history.unshift(this.value)
						uni.setStorageSync('history_key', this.history);
					}
					uni.navigateTo({
						url: `/pages/choose/choose?key=${this.value}`
					})
				}
			},
			// 删除所以历史记录
			getDelStorage() {
				uni.showModal({
					title: '提示',
					content: '你确定要删除所有记录吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.history = []
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//长按
			longpress(i) {
				this.currentIndex = i
				this.isShow = true
			},
			//小图标删除
			iconRemove(i) {
				this.history.splice(i, 1)
				uni.setStorageSync('history_key', this.history);
			},
			setInput(item) {
				if (item.name) {
					this.value = item.name
				} else {
					this.value = item
				}
			}
		}
	}
</script>

<style>
	.uni-easyinput__placeholder-class {
		font-size: 26rpx !important;
	}

	.btn-reaction {
		position: relative;
	}

	.icon-position {
		position: absolute;
		right: 1rpx;
	}
</style>